import React, { Component, createRef } from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, message, Form, Input, Space } from 'antd';
import Captcha from '../../components/Captcha'
import axios from '../../http/http';
import url from '../../config/url';
import { withRouter } from 'react-router-dom';

class Mobile extends Component {
    state = {
        key: '',//验证码子组件给当前组件的key
        time: 30//倒计时起点
        , disabledClick: true//登录按钮是禁用的
        , requestId: ''//短信发送成功后的requestId
    }
    ref1 = createRef()//创建一个ref引用对象，给表单from赋值
    ref2 = createRef()//给图形验证码
    render() {
        return (
            <div>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={this.onFinish}
                    ref={this.ref1}
                >
                    {/* 用户名 */}
                    <Form.Item
                        name="mobile"
                        rules={[
                            {
                                required: true,
                                message: "请输入手机号!",
                                pattern: /^1[3-9]\d{9}$/
                            },
                        ]}
                    >
                        <Input
                            prefix={<UserOutlined className="site-form-item-icon" />}
                            placeholder="请输入手机号"
                        />
                    </Form.Item>

                    <Space>
                        <Form.Item
                            name="captcha"
                            rules={[
                                {
                                    required: true,
                                    message: "请输入验证码!",
                                },
                            ]}
                        >
                            <Input
                                prefix={<UserOutlined className="site-form-item-icon" />}
                                placeholder="验证码" size='large'
                            />
                        </Form.Item>
                        <Form.Item>
                            <Captcha getKey={this.getKey} w={120} ref={this.ref2}></Captcha>
                        </Form.Item>
                    </Space>
                    <Space>
                        {/* 密码 */}
                        <Form.Item
                            name="code"
                            rules={[
                                {
                                    required: true,
                                    message: "请输入短信验证码!",
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="短信验证码"
                                size="large"
                            />

                        </Form.Item>

                        <Form.Item>
                            <Button size="large" disabled={this.state.time != 30} onClick={this.sendMsg}>{this.state.time != 30 ? this.state.time + '秒' : '发送短信'}</Button>
                        </Form.Item>
                    </Space>
                    <Form.Item >
                        <Button
                            type="primary"
                            htmlType="submit"
                            className="login-form-button"
                            size="large"
                            disabled={this.state.disabledClick}
                        >
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }
    onFinish = (values) => {
        values.requestId = this.state.requestId
        axios.post(url.msglogin, values).then(res => {
            if (res.data.errNo == 0) {
                // 登录成功
                message.success('登录成功', 1)
                this.props.history.push('/dashboard')
            } else {
                // 失败
                message.error(res.data.errText, 1)
                // 刷新验证码
                this.ref2.current.loadImg()
                this.ref1.current.setFieldsValue({
                    mobile: '',
                    captcha: '',
                    code: ''
                })
            }
        })
    }
    // 定义倒计时变量
    timer = null
    // 定义倒计时函数
    timeover = () => {
        this.timer = setInterval(() => {
            if (this.state.time == 0) {
                clearInterval(this.timer)
                // 重新回归初始值30
                this.setState({
                    time: 30
                })
            } else {
                this.setState({
                    time: this.state.time - 1
                })
            }

        }, 1000)
    }
    getKey = (key) => {
        this.setState({
            key: key
        })
    }
    sendMsg = () => {
        //图形验证码符合校验规则
        // console.log(this.ref1);
        this.ref1.current.validateFields(['mobile', 'captcha']).then(res => {
            axios.post(url.captchaverufy, {
                key: this.state.key,
                captcha: res.captcha
            }).then(res1 => {
                if (res1.data.errNo == 0) {
                    // 图形验证码正确
                    axios.post(url.sendmsg, {
                        token: res1.data.context.token,
                        mobile: res.mobile,
                        type: 0
                    }).then(res2 => {
                        if (res2.data.errNo == 0) {
                            // 短信发送成功
                            message.success('短信发送成功', 1)
                            // 开启倒计时
                            this.timeover()
                            this.setState({
                                disabledClick: false
                            })
                            this.setState({
                                requestId: res2.data.requestId
                            })
                        } else {
                            // 发送失败
                            console.log(11,res2);
                            message.error(res2.data.errText, 1)
                           
                            // 重新更新验证码
                            this.ref2.current.loadImg()
                            // 清空表单内容
                            this.ref1.current.setFieldsValue({
                                mobile: '',
                                captcha: ''
                            })
                        }
                    })
                } else {
                    // 错误
                    message.error(res1.data.errText, 1);
                    // 重新生成新的验证码
                    this.ref2.current.loadImg();
                    // 清空图形内容
                    this.ref1.current.setFieldsValue({
                        captcha: ''
                    })
                }
            }).catch(e=>{})
        }).catch(e => { })
    }
}

export default withRouter(Mobile);
